<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">{{ tabName == 2 ? "供应商ID" : "会员UID" }}：</span>
                <el-input :placeholder="`输入${tabName == 2 ? '供应商ID' : '会员UID'}`" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">{{ tabName == 2 ? "供应商名称" : "会员姓名" }}：</span>
                <el-input :placeholder="`输入${tabName == 2 ? '供应商名称' : '会员姓名'}`" v-model.trim="user_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">{{ tabName == 2 ? "供应商" : "会员" }}账户：</span>
                <el-input :placeholder="`输入${tabName == 2 ? '供应商账户' : '会员账户'}`" v-model.trim="account" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">日期范围：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button @click="clickExport">导出</el-button>
            </div>
        </div>

        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane label="会员提现驳回记录" name="0">
                <el-table
                    class="table-mb"
                    v-loading="table_loading"
                    :data="user_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="昵称/ID" min-width="140">
                        <template #default="{ row }">
                            <p class="line-one">{{ row.nickname }}</p>
                            <p>UID：{{ row.uid }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名/电话" min-width="120">
                        <template #default="{ row }">
                            <p>{{ row.name }}</p>
                            <p>{{ row.mobile }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at_label" label="申请时间" width="160"></el-table-column>
                    <el-table-column label="提现金额(元)" min-width="170">
                        <template #default="{ row }">
                            <p>申请金额：{{ row.money }}</p>
                            <p>实际到账：{{ row.end_money }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="账号信息" min-width="320">
                        <template #default="{ row }">
                            <p>账号：{{ row.account_number }}</p>
                            <p>账户：{{ row.account_info }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="提现状态" min-width="90">
                        <template #default="{ row }">
                            <span style="color: #4b93fa">已拒绝</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="提现方式" min-width="80">
                        <template #default="{ row }">
                            <span v-if="row.from === 'weixin'">微信</span>
                            <span v-else>{{ row.from === "bank" ? "银行卡" : "支付宝" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="intro" label="备注" min-width="220"></el-table-column>
                    <el-table-column prop="reason" label="驳回原因" min-width="220" fixed="right"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background v-model:current-page="user_page" :page-size="20" :total="user_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="代理商提现驳回记录" name="1">
                <el-table
                    class="table-mb"
                    v-loading="table_loading"
                    :data="agentArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="昵称/ID" min-width="140">
                        <template #default="{ row }">
                            <p class="line-one">{{ row.nickname }}</p>
                            <p>UID：{{ row.uid }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名/电话" min-width="120">
                        <template #default="{ row }">
                            <p>{{ row.name }}</p>
                            <p>{{ row.mobile }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at_label" label="申请时间" width="160"></el-table-column>
                    <el-table-column label="提现金额(元)" min-width="170">
                        <template #default="{ row }">
                            <p>申请金额：{{ row.money }}</p>
                            <p>实际到账：{{ row.end_money }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="账号信息" min-width="320">
                        <template #default="{ row }">
                            <p>账号：{{ row.account_number }}</p>
                            <p>账户：{{ row.account_info }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="提现状态" min-width="90">
                        <template #default="{ row }">
                            <span style="color: #4b93fa">已拒绝</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="提现方式" min-width="80">
                        <template #default="{ row }">
                            <span v-if="row.from === 'weixin'">微信</span>
                            <span v-else>{{ row.from === "bank" ? "银行卡" : "支付宝" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="intro" label="备注" min-width="220"></el-table-column>
                    <el-table-column prop="reason" label="驳回原因" min-width="220" fixed="right"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background v-model:current-page="agent_page" :page-size="20" :total="agent_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="供应商提现驳回记录" name="2" v-if="versions && versions.version_id != 1">
                <el-table
                    class="table-mb"
                    v-loading="table_loading"
                    :data="suppArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="供应商信息" min-width="240">
                        <template #default="{ row }">
                            <p>{{ row.title }}[ID: {{ row.supplier_id }}]</p>
                            <p>{{ row.mobile }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at_label" label="申请时间" width="160"></el-table-column>
                    <el-table-column label="提现金额(元)" min-width="170">
                        <template #default="{ row }">
                            <p>申请金额：{{ row.money }}</p>
                            <p>实际到账：{{ row.end_money }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="账号信息" min-width="350">
                        <template #default="{ row }">
                            <p>账号：{{ row.account_number }}</p>
                            <p>账户：{{ row.account_info }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="提现状态" min-width="90">
                        <template #default="{ row }">
                            <span style="color: #4b93fa">已拒绝</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="提现方式" min-width="80">
                        <template #default="{ row }">
                            <span v-if="row.from === 'weixin'">微信</span>
                            <span v-else>{{ row.from === "bank" ? "银行卡" : "支付宝" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="intro" label="备注" min-width="220"></el-table-column>
                    <el-table-column prop="reason" label="驳回原因" min-width="220" fixed="right"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background v-model:current-page="supp_page" :page-size="20" :total="supp_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, computed } from "vue"
import { Search } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()
const storeBase = useBaseStore()
const versions = computed(() => {
    return storeBase.versions
})

onMounted(() => {
    getUsers()
})

/**
 * 搜索
 * @param {String} user_name 用户名称
 * @param {String} user_id 用户ID
 * @param {String} area_time 对账日期
 * @param {String} account 账户
 */
const user_name = ref("")
const account = ref("")
const user_id = ref("")
const area_time = ref("")
const search_btn = ref(false)
const handleSearch = () => {
    search_btn.value = true
    tabName.value == 0 && getUsers()
    tabName.value == 1 && getAgents()
    tabName.value == 2 && getSuppliers()
}

/**
 * tab切换
 */
const tabName = ref("0")
const typeArrs = ref([
    {
        loading: true,
    },
    {
        loading: true,
    },
    {
        loading: true,
    },
])
const handleTab = (pane) => {
    tabName.value = pane.index
    typeArrs.value[tabName.value].loading && getPublic()
}
function getPublic() {
    tabName.value == 0 && getUsers()
    tabName.value == 1 && getAgents()
    tabName.value == 2 && getSuppliers()
}

/**
 * 会员驳回
 * @param {Boolean} table_loading 表格加载
 * @param {Number} user_page 页码
 * @param {Number} user_total 总数
 * @param {Array} user_data 商品数组
 */
const table_loading = ref(false)
const user_page = ref(1)
const user_total = ref(0)
const user_data = ref([])
watch(user_page, (val) => {
    user_data.value = []
    getUsers()
})
function getUsers() {
    table_loading.value = true
    proxy.$axios
        .get("finance/log/userTixianReject", {
            params: {
                uid: user_id.value,
                so: user_name.value,
                account: account.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
                page: user_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            search_btn.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                user_total.value = res.data.count
                user_data.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            search_btn.value = false
            table_loading.value = false
        })
}

/**
 * 代理商驳回
 * @param {Number} agent_page 页码
 * @param {Number} agent_total 总数
 * @param {Array} agentArrs 商品数组
 */
const agent_page = ref(1)
const agent_total = ref(0)
const agentArrs = ref([])
watch(agent_page, (val) => {
    agentArrs.value = []
    getAgents()
})
function getAgents() {
    table_loading.value = true
    proxy.$axios
        .get("finance/log/agentTixianReject", {
            params: {
                uid: user_id.value,
                so: user_name.value,
                account: account.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
                page: agent_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            search_btn.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                agent_total.value = res.data.count
                agentArrs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            search_btn.value = false
            table_loading.value = false
        })
}

/**
 * 供应商驳回
 * @param {Number} supp_page 页码
 * @param {Number} supp_total 总数
 * @param {Array} agentArrs 商品数组
 */
const supp_page = ref(1)
const supp_total = ref(0)
const suppArrs = ref([])
watch(supp_page, (val) => {
    suppArrs.value = []
    getSuppliers()
})
function getSuppliers() {
    table_loading.value = true
    proxy.$axios
        .get("finance/log/supplierTixianReject", {
            params: {
                supplier_id: user_id.value,
                so: user_name.value,
                account: account.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
                page: supp_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            search_btn.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                supp_total.value = res.data.count
                suppArrs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            search_btn.value = false
            table_loading.value = false
        })
}

// 导出 
const clickExport = () => {
    let urlarr = ["finance/log/userTixianRejectExport", "finance/log/agentTixianRejectExport", "finance/log/supplierTixianRejectExport"]
    proxy.$axios
        .get(urlarr[tabName.value], {
            params: {
                uid: user_id.value,
                so: user_name.value,
                account: account.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
            },
            responseType: "blob",
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "RejectRecord",
}
</script>

<style lang="less" scoped>
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
